<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>沂水旅游-景点详情</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css">
    <link rel="stylesheet" href="/static/index/css/base.css">
    <link rel="stylesheet" href="/static/index/css/baseDetail.css">
    <link rel="stylesheet" href="/static/index/css/tourDetail.css">
    <link type="text/css" rel="stylesheet" href="/static/index/vendor/css/calendar-pro.css">
</head>
<body>

{include file="public/header" model='tour' /}

<div class="searchBox layui-hide-xs">
    <div class="layui-container mbx-top-nav">
        <div class="mianbaoxie-nav">
            <span class="layui-breadcrumb">
              <a href="/">首页</a>
              <a href="{:url('tour/tourList')}">景点列表</a>
              <a><cite>景点详情</cite></a>
            </span>
        </div>

        <div class="weather">
            <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=5&py=linyi2" width="200" height="30" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" ></iframe>
        </div>

    </div>
</div>

<div class="tour-detail">
    <div class="layui-container">
        <div class="tour-detail-box tour-detail-top">
            <div class="layui-row">
                <div class="layui-col-md6 layui-col-xs12">
                    <div class="tour-title">
                        <h1>{$tour.tour_name}</h1>
                        {eq name="is_select" value="0"}
                        <span id="toCollect" style="cursor: pointer;"><i class="layui-icon layui-icon-rate" style="font-size: 16px; color: #F2BF56;"></i>收藏</span>
                        {else/}
                        <span>已收藏</span>
                        {/eq}
                    </div>
                    <div class="tour-tags">
                        {foreach $tour.tour_tag as $k => $v}
                        <span>{$v}</span>
                        {/foreach}
                    </div>
                </div>
                <div class="layui-col-md6 layui-col-xs12">

                    <div class="tour_tobuy_md  layui-hide-xs">
                        <div class="buy-button">
                            <a href="#goBuy">立即购买</a>
                        </div>
                        <p>已售{$tour.sale_sum}</p>
                    </div>

                    <div class="tour_tobuy_xs  layui-hide-md">

                        <a href="#goBuy">立即购买</a>
                        <span>已售{$tour.sale_sum}</span>

                    </div>
                </div>
            </div>

            <div class="layui-row layui-col-space30">
                <div class="layui-col-md7 layui-col-xs12">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-md8  layui-col-xs12">
                            <div class="tour_l_img">
                                {notempty name="tourImg[0]['img_path']"}
                                <img lay-src="{$tourImg[0]['img_path']}" alt="">
                                {/notempty}
                            </div>
                        </div>
                        <div class="layui-col-md4  layui-col-xs12">
                            <div class="layui-row layui-col-space10">
                                <div class="layui-col-md12  layui-col-xs6">
                                    <div class="tour_r_img">
                                        {notempty name="tourImg[1]['img_path']"}
                                        <img lay-src="{$tourImg[1]['img_path']}" alt="">
                                        {/notempty}
                                    </div>
                                </div>
                                <div class="layui-col-md12  layui-col-xs6">
                                    <div class="tour_r_img">
                                        {notempty name="tourImg[2]['img_path']"}
                                        <img lay-src="{$tourImg[2]['img_path']}" alt="">
                                        {/notempty}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md5  layui-col-xs12">

                    <div class="open-time">
                        <i class="layui-icon layui-icon-log" style="font-size: 18px; color: #20E6BA;"></i>&nbsp;
                        开放时间：<span id="open_time">{$tour.tour_time}</span>
                    </div>
                    <div class="tour-address">
                        <div class="tour-address-l">
                            <i class="layui-icon layui-icon-location" style="font-size: 18px; color: #20E6BA;"></i>
                            景点地址：<span id="tour_address">{$tour.address}</span>
                        </div>
                        <div class="tour-address-r">
                            <a href="#theMap">[ 查看地图 ]</a>
                        </div>
                    </div>
                    <div class="tour-rate">
                        <div class="tour-rate-top">
                            <div class="tour-rate-top-icon">
                                <i class="layui-icon layui-icon-face-smile"
                                   style="font-size: 18px; color: #FFAD6D;"></i>
                                &nbsp;
                                好评率{$tour.rate}%
                            </div>
                            <div class="tour-rate-top-a">
                                <a href="#theComment">查看全部{$tour.comment_count}条评论 ></a>
                            </div>
                        </div>

                        <div class="comment-content">
                            {$tour.latests_comment.content}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-container ticket-box" style="margin-top: 20px;" id="goBuy">
        <div class="tour-detail-box tour-detail-midle">
            <div class="layui-row ticket-t">
                <div class="layui-col-md1">
                    <div class="target-s">景点门票</div>
                </div>
            </div>

    
            <div class="layui-row">
                <div class="ticket-detail" style="padding:30px 0;border: none;color: #757575;font-size: 12px;">
                    <div class="layui-col-md12">
                        <div class="layui-col-md2">门票名称</div>
                        <div class="layui-col-md2">使用说明</div>
                        <div class="layui-col-md2">
                            <div style="display: flex;justify-content: center;">门市价</div>
                        </div>
                        <div class="layui-col-md2">
                            <div style="display: flex;justify-content: center;">特惠价</div>
                        </div>

                        <div class="layui-col-md2">
                            <div style="display: flex;justify-content: center;">特惠</div>
                        </div>

                        <div class="layui-col-md2">立即预定</div>
                    </div>
                </div>
            {foreach $ticket as $k2 => $v2}
                <div class="layui-col-md12">

                    <div class="ticket-detail">

                        <div class="layui-row">

                            <div class="layui-col-md2">
                                <div class="ticket-name">
                                    <a href="javascript:;" onclick="showBuyKnow({$v2.tid})">
                                    {$v2.tname}
                                    <i class="layui-icon layui-icon-triangle-d"
                                       style="font-size: 16px; color: #2D9FFF;"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="layui-col-md2">
                                <div class="ticket-tags">
                                    随时退 丨 取票立即可用
                                </div>
                            </div>

                            <div class="layui-col-md2">
                                
                                <div class="ticket-price" style="display: flex;justify-content: center;">
                                    <sup>￥</sup>
                                    <del>
                                    {$v2.price}
                                    </del>
                                </div>
                            
                            </div>

                            <div class="layui-col-md2">
                                <div class="ticket-price" style="display: flex;justify-content: center;">
                                    <sup>￥</sup>
                                    {if $v2.is_discount == 1}
                                        {$v2.discount_price}
                                    {else/}
                                        {$v2.price}
                                    {/if}
                                </div>
                            </div>

                            <div class="layui-col-md2">
                                <div class="ticket-is-discount" style="display: flex;justify-content: center;">
                                    {if $v2.is_discount == 1}
                                    <span>今日特惠</span>
                                    {/if}
                                </div>
                            </div>
                            
                            <div class="layui-col-md2">
                                <div class="ticket-btn-box">
                                    <a href="javascript:;" onclick="toBuy({$v2.tid},'{$v2.tname}','{if $v2.is_discount == 1}{$v2.discount_price}{else/}{$v2.price}{/if}')">立即预定</a>
                                </div>
                            </div>

                        </div>

                        <div class="layui-row buy-should-know" data-show="0" id="buy_should_konw_{$v2.tid}">

                            <div class="ticket-need-konw">

                                <div class="need_konw_title">门票预订须知</div>
                                <div class="need_konw_group">
                                    <div class="need_konw_group_title">预订说明</div>
                                    <div class="need_konw_group_li">
                                        <div class="need_konw_group_li_l">预订时间：</div>
                                        <div class="need_konw_group_li_r">店铺可填写，如不填写则默认最早可订明日票。</div>
                                    </div>

                                    <div class="need_konw_group_li">
                                        <div class="need_konw_group_li_l">有效期：</div>
                                        <div class="need_konw_group_li_r">选择的使用日期当天有效。</div>
                                    </div>
                                </div>

                                <div class="need_konw_group">
                                    <div class="need_konw_group_title">费用说明</div>
                                    <div class="need_konw_group_li">
                                        <div class="need_konw_group_li_l">费用包含：</div>
                                        <div class="need_konw_group_li_r">选择的门票种类以及选择的票数。</div>
                                    </div>
                                </div>

                                <div class="need_konw_group">
                                    <div class="need_konw_group_title">使用方法</div>
                                    <div class="need_konw_group_li">
                                        <div class="need_konw_group_li_l">使用方法：</div>
                                        <div class="need_konw_group_li_r">到售票处凭预定二维码或数字码换取纸质 门票</div>
                                    </div>

                                    <div class="need_konw_group_li">
                                        <div class="need_konw_group_li_l">入园地址：</div>
                                        <div class="need_konw_group_li_r">{$tour.address}</div>
                                    </div>

                                     <div class="need_konw_group_li">
                                        <div class="need_konw_group_li_l">入园时间：</div>
                                        <div class="need_konw_group_li_r">{$tour.tour_time}</div>
                                    </div>
                                </div>

                                <div class="need_konw_group">
                                    <div class="need_konw_group_title">退改说明</div>
                                    <div class="need_konw_group_li">
                                        <div class="need_konw_group_li_l">退改规则：</div>
                                        <div class="need_konw_group_li_r" style="line-height: 25px;">
                                        1.未使用可随时申请退款<br>
                                        2.过期无效<br>
                                        3.使用日期过后经核实未使用系统将自动 确认订单，无法退款<br>
                                        4.订单不支持部分退<br>
                                        5.如需改期，请申请取消后重新预订
                                    </div>
                                    </div>
                                </div>

                                <div class="need_konw_group">
                                    <div class="need_konw_group_title">其他说明</div>
                                    <div class="need_konw_group_li">
                                        <div class="need_konw_group_li_l">发票说明：</div>
                                        <div class="need_konw_group_li_r">如需发票，请在换票时在售票处开取，本平台不做发票开取工作。</div>
                                    </div>
                                </div>

                            </div>

                        </div>

                    </div>

                </div>
                {/foreach}

            </div>


        </div>
    </div>


    <div class="layui-container ticket-info" style="margin-top: 20px;"> 
        <div class="tour-detail-box tour-detail-midle">


            <div class="layui-row ticket-t">
                <div class="layui-col-md1">
                    <div class="target-s">景点简介</div>
                </div>
                <div class="layui-col-md1">
                    <a href="#theMap"><div class="target-s target-s-no">地图指南</div></a>
                </div>
                <div class="layui-col-md1">
                    <a href="#theComment"><div class="target-s target-s-no">用户评价</div></a>
                </div>
            </div>


            <div class="layui-row ticket-discript">

                <div class="layui-col-md12">
                    <div class="ticket-discript-title">
                        景点简介
                    </div>
                </div>

                <div class="layui-col-md10 layui-col-md-offset1">

                    <div class="ticket-discript-content">
                        {$tour.tour_subject}
                    </div>

                </div>

            </div>

            <div class="layui-row ticket-discript" id="theMap">

                <div class="layui-col-md12">
                    <div class="ticket-discript-title">
                        地图指南
                    </div>
                </div>

                <div class="layui-col-md10 layui-col-md-offset1">

                    <div class="ticket-discript-content" id="map_content" style="width: 100%;height:400px">

                    </div>

                </div>

            </div>

            <div class="layui-row ticket-discript" id="theComment">

                <div class="layui-col-md12">
                    <div class="ticket-discript-title">
                        用户评价
                    </div>
                </div>

                <div class="layui-col-md10 layui-col-md-offset1">

                    <div class="ticket-discript-content" id="ticket-discript-content">


                    </div>

                    <div id="comment-page"></div>

                </div>

            </div>

        </div>

    </div>

</div>

{include file="public/footer"  /}

<style type="text/css">
    .toBuyModal{
        display: none;
        padding: 20px;
    } 
    .modal_main{
        display: flex;
        justify-content: space-between;
        width:740px;
    } 

    .selectDate{
        width: 400px;
    }
    .theBuyTicketNmme{
        width: 300px;
        padding-top: 20px;
        color: #333333;
        font-size: 16px;
    }

    #selectDate .layui-laydate-main{width:400px;}
    #selectDate .layui-laydate-content td,#test-n1 .layui-laydate-content th{width:87px;height: 50px;}

    #selectDate .layui-laydate .layui-this {
        background-color: #20E6BA !important;
        color:#fff !important;
    }

    .selectNum{
        display: flex;
        justify-content: flex-start;
        height: 80px;
        align-items: center;
    }

    .buyButton{
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }

    .buyButtonLeft{
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 44px;
        background: #F5F5F5;
        color: #FF4C4C;
    }

    .buyButtonLeft span{
        font-size: 16px;
        font-weight: bold;
    }

    .toBuyRight{
        position: relative;
    }

    .toBuyButtonBox{
        width: 100%;
        position:absolute;
        bottom: 30px;
        left: 0;
    }

    .buyButtonRight{
        width: 50%;
        height: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #20E6BA;
        color: #ffffff;
        font-size: 20px;
        cursor: pointer;
    }
</style>
<div class="toBuyModal" id="toBuyModal">

    <div class="modal_main">
        <div class="toBuyLeft">
            <div class="selectDate" id="selectDate"></div>
        </div>
        <div class="toBuyRight">
            <div class="theBuyTicketNmme" id="theBuyTicketNmme"></div>

            <div class="toBuyButtonBox">
                <div class="selectNum">
                    <p>数量：</p>
                    <input name="js_num" id="alignment" class="alignment" data-step="1" data-min="1" data-max="100" data-digit="0" value="1"/>
                    <input type="hidden" id="theBuyTicketId" name="">
                    <input type="hidden" id="theBuyPrice" name="">
                    <input type="hidden" id="theBuyTime" name="">
                </div>

                <div class="buyButton">
                    <div class="buyButtonLeft">
                        价格：￥ <span id="toBuyPrice"></span>
                    </div>
                    <div class="buyButtonRight" id="goBuyPage">
                        立即预定
                    </div>
                </div>
            </div>
        </div>
    </div>   
</div>

<script src="/static/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/static/index/vendor/js/calendar-pro.js"></script>
<script type="text/javascript" src="/static/index/js/num-alignment.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=358e193808b3b90caecc22bb5dfd23b8"></script>

<script>
          var layer    = layui.layer
            , element  = layui.element
            , carousel = layui.carousel
            , flow     = layui.flow
            , laypage  = layui.laypage
            , laydate  = layui.laydate
            , form     = layui.form;

        flow.lazyimg();
        form.render();
        element.init();

        window.showBuyKnow = function(id){

            $('.buy-should-know').hide();


            var showId = '#buy_should_konw_' + id;

            var is_show = $(showId).attr('data-show');

            if (is_show == 1){
                $(showId).attr('data-show',0);
                $(showId).hide();

            }else{
                $(showId).attr('data-show',1);
                $(showId).fadeIn();

            }

        }

        var uid = '{$Think.session.uid}';
        function toBuy(id,ticket_name,price){

            if (!uid) {
                layer.msg('请先登录',{time:1000});
                return false;
            }

            $('#theBuyTicketId').val(id);
            $('#theBuyTicketNmme').html(ticket_name);
            $('.alignment').val(1);
            $('#theBuyPrice').val(price*1);
            $('#toBuyPrice').html(price*1);
            layer.open({
                     title: false
                    , type: 1
                    , shadeClose: true
                    , area:['780px']
                    , content: $('#toBuyModal')
                    ,success:function(){
                
                        // 初始化
                        alignmentFns.initialize();

                        $('#alignment').on('change',function(){
                            //获取购买数量
                            var js_num = $('.alignment').val();
                            var price = $('#theBuyPrice').val();

                            $('#toBuyPrice').html(price*js_num);
                    
                        });
                
                    }
                    , end:function(){
                        // 销毁
                        alignmentFns.destroy();
                        $('#toBuyModal').hide();
                    }
                });

        }

        $('#goBuyPage').click(function(){
            var ticket_id = $('#theBuyTicketId').val();
            var date = $('#theBuyTime').val();
            var num = $('#alignment').val();
            window.location.href="{:url('createOrder')}?ticket_id="+ticket_id+'&date=' + date + '&num=' + num;
        });

        

        var map = new AMap.Map('map_content', {
            zoom:11,//级别
            scrollWheel: false,
            center: [{$tour.longitude},{$tour.latitude}],//中心点坐标
            viewMode:'3D'//使用3D视图
        });

        var marker = new AMap.Marker({
            position: new AMap.LngLat({$tour.longitude},{$tour.latitude}),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: '{$tour.tour_name}'
        });

        map.plugin(["AMap.ControlBar"],function(){
            var controlBar = new AMap.ControlBar({showZoomBar:true})
            map.addControl(controlBar)
        });

        map.add(marker);

        var uid = "{$Think.session.uid}";
        var other_id = "{$tour.tour_id}";
        $('#toCollect').click(function(){

            if (!uid) {
                layer.msg('请先登录',{time:1000});
                return false;
            }

            $.ajax({
                    type: "post",
                    url: "{:url('Collect/addCollection')}",
                    dataType: 'json',
                    data: {user_id:uid,other_id:other_id,type:1},

                    success:function(res){
                        if (res.code == 200) {
                            console.log(res.code);
                            layer.msg(res.msg,{time:1000},function(){
                                $('#toCollect').html('已收藏');
                                $('#toCollect').css('cursor','');
                                $('#toCollect').attr('id','');

                            });
                           

                        }else{
                            layer.msg(res.msg,{time:1000});
                        }

                    }
                });

        });

        //执行一个laypage实例
        laypage.render({
             elem: 'comment-page' //注意，这里的 test1 是 ID，不用加 # 号
            ,count: {$tour.comment_count} //数据总数，从服务端得到
            ,prev:'<i class="layui-icon layui-icon-left"></i>'
            ,next:'<i class="layui-icon layui-icon-right"></i>'
            ,limit:5
            ,jump: function(obj, first){
                $.ajax({
                    type: "post",
                    url: "{:url('tour/getComment')}",
                    data: {page:obj.curr,tour_id:{$tour.tour_id}},
                    success:function(data){
                        var system_str = '';
                        $.each(data.data,function(k,v){

                            system_str += '<div class="ticket-comment-li">';
                            system_str += '<div class="ticket-comment-user">';
                            system_str += '<div class="ticket-comment-user-l">';
                            system_str += '<div class="comment-user-img">';
                            system_str += '<img src="'+ v.user_icon +'" alt="">';
                            system_str += '</div>';
                            system_str += '<div class="comment-user-name">';
                            system_str += v.nickname;
                            system_str += '</div>';
                            system_str += '<div class="comment-user-tag">';
                            
                            if (v.eval_status == 1){
                                system_str += '<span>好评</span>';
                            } else {
                                system_str += '<span>差评</span>';
                            }

                            system_str += '</div>';
                            system_str += '</div>';
                            system_str += '<div class="ticket-comment-user-r">';
                            system_str += v.create_time;
                            system_str += '</div>';
                            system_str += '</div>';
                            system_str += '<div class="ticket-comment-content">';
                            system_str += v.content;
                            system_str += '</div>';

                            system_str += '<div class="ticket-comment-img">';
                            system_str += '<div class="layui-row layui-col-space20">';

                            for(i = 0;i < v.images.length;i++){

                                system_str += '<div class="layui-col-md4">';
                                system_str += '<div class="comment-img">';
                                system_str += '<img src="'+v.images[i]+'" alt="">';
                                system_str += '</div>';
                                system_str += '</div>';

                            }

                            system_str += '</div>';
                            system_str += '</div>';
                            system_str += '</div>';


                        });

                        $('#ticket-discript-content').html(system_str);

                    }
                });
            }
        });

        //年选择器
        laydate.render({ 
           elem: '#selectDate'
          ,show: true
          ,position:'static'
          ,showBottom:false
          ,min:0
          ,ready: function(date){

            var theMonth = date.month;
            var theDate  = date.date;
            if (date.month < 10) {
                theMonth = '0' + theMonth;
            }

            if (theDate < 10) {
                theDate = '0' + theDate;
            }

            var theNowDay = date.year + '-' + theMonth + '-' + theDate;

            $('#theBuyTime').val(theNowDay);
          }

         ,change: function(value, date, endDate){
            $('#theBuyTime').val(value);
          }
        });

        

</script>
</body>
</html>